<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>红绿灯倒计时</title>
		<link rel="stylesheet" href="red.css" />
	</head>

	<body>
		<div class="box">
			<!--红灯-->
			<div id="r"></div>
			<!--黄灯-->
			<div id="y"></div>
			<!--绿灯-->
			<div id="g"></div>
			<!--倒计时-->
			<div id="count" class="count"></div>
		</div>
		<script>
			/* 1、设置红黄绿灯、倒计时对象
												   2、设置绿灯亮时初始化页面
												   3、实现红绿灯倒计时 
												   创建灯对象：3个属性（红、黄、绿）、1个方法（更改样式）
												   红：元素对象亮灯时间、下次亮灯的灯、背景颜色*/
			var lamp = {
				red: {
					obj: document.getElementById('r'),
					time: 30,
					next: 'green',
					style: ['red', 'gray', 'gray']
				},
				yellow: {
					yellow: {
						obj: document.getElementById('y'),
						time: 30,
						next: 'green',
						style: ['gray', 'yellow', 'gray']
					}
				},
				green: {
					green: {
						obj: document.getElementById('g'),
						time: 30,
						next: 'green',
						style: ['gray', 'gray', 'green']
					}
				},
				change: function(style) {
					this.red.obj.style.background = style[0];
					this.yellow.obj.style.background = style[1];
					this.green.obj.style.background = style[2];

				}
			};
			var count = {
				obj:document.getElementById('count'),
				chnage: function(num) {
					this.obj.innerHTML = (num < 10 ? '0' + num : num);
				}
			};
			//2 静态 设置绿灯时初始化页面（3个灯背景颜色、数字）
			var now = lamp.green;
			var t=now.time;
			count.change(t);
			lamp.change(now.style);
			//3 动态，实现红绿灯倒计时：计时器
			setInterval(myfun,1000);
			function myfun(){
			/*
			 * 时间计数
			 *   若<=0 当前灯数据 更改更改
			 * 更改时间
			 */
			if(t--<=0){
				now=lamp[now.next];
				t=now.time;
				lamp.change(now.style);
			}
			count.change(t);
			}
		</script>
	</body>

</html>